import React from 'react';
import { Tabs, Layout} from 'antd';

import User from './User';
import Home from './Home';



const {  Content, Footer, } = Layout;
const TabPane = Tabs.TabPane;

class Tab extends React.Component {
  constructor(props) {
    super(props);
    this.newTabIndex =1;
   
    this.state = {
      activeKey: '1',
      panes:[
            { title: '首页', content: 'Content of Tab Pane 1', key: '1' }
         ]
    };
  }

  onChange = (activeKey) => {
    this.setState({ activeKey });
  }

  onEdit = (targetKey, action) => {
    this[action](targetKey);
  }

  isExsit(pans,name){
    let flg = 'true';
    pans.forEach((value,key)=>{
      let num = name.localeCompare(value.title);
        if(num===0){
            this.setState({
                activeKey:value.key
            })
            flg = 'false';
            return false;
        }
    })
    return flg;
  }

  add = (id,name) => {

    let  pans = this.state.panes ;
    let flg =  this.isExsit(pans,name)
    
    if(flg==='true'){

        const panes = this.state.panes;
        this.newTabIndex = this.newTabIndex + 1;
        const activeKey = this.newTabIndex+'';
        panes.push({ title: name, content: name, key: activeKey });
        this.setState({ panes, activeKey });
    }
   
  }

  remove = (targetKey) => {
    let activeKey = this.state.activeKey;
    let lastIndex;
    this.state.panes.forEach((pane, i) => {
      if (pane.key === targetKey) {
        lastIndex = i - 1;
      }
    });
    const panes = this.state.panes.filter(pane => pane.key !== targetKey);
    if (panes.length && activeKey === targetKey) {
      if (lastIndex >= 0) {
        activeKey = panes[lastIndex].key;
      } else {
        activeKey = panes[0].key;
      }
    }
    this.setState({ panes, activeKey });
  }

  render() {
    return (
      <div>
        {/* <div style={{ marginBottom: 16 }}>
          <Button onClick={this.add}>ADD</Button>
        </div> */}
        <Tabs style={{ background: '#fff', padding: 0 }}
          hideAdd
          onChange={this.onChange}
          activeKey={this.state.activeKey}
          type="editable-card"
          onEdit={this.onEdit}
        >
          {this.state.panes.map(pane =>
            
               <TabPane tab={pane.title} key={pane.key}>
               <Content style={{ margin: '0 8px' }}>
                  
                    <div style={{ padding: 0,background: '#fff',  minHeight: 655 }}>
                       
                        {pane.content==='用户管理'? <User/> : <Home/> }

                    </div>
                  </Content>         
                
                  {/* 页脚 */}
                   <Footer style={{ textAlign: 'center',padding:'2px 50px' }}>
                    made in China ©2019 Created by Professor_Kong
                  </Footer> 
            
            </TabPane>)}
        </Tabs>
      </div>
    );
  }
}

export default Tab;